import { Upload, Button } from "antd";
import React, { useEffect, useMemo } from "react";
import ImgCrop from 'antd-img-crop';
import { PlusOutlined, UploadOutlined } from '@ant-design/icons';


export default function UploadCom(props) {
    let token = localStorage.getItem("TOKEN") ? localStorage.getItem("TOKEN") : "b60ef0c40b7f1b7e63c2b24b127988d4";

    let { value, onChange, item } = props;
    function beforeUpload(file) {
        const isJpgOrPng = file.type === 'image/jpg' || file.type === 'image/jpeg' || file.type === 'image/png';
        if (!isJpgOrPng && item.listType == 'img') {
            message.error('只能上传.jpg/.jpeg/.png图片!');
        }
        if (item.listType == 'img') {
            return isJpgOrPng;
        } else {
            return true;
        }
    }

    const uploadprops = {
        name: 'file',
        action: '/cujin/ngic-promote-base/sysAttachment/uploadFile',
        listType: item.listType == 'img' ? 'picture-card' : 'text',
        accept: item.listType == 'img' ? '.jpg,.png,.jpeg,' : '*',
        multiple: item.multiple ? item.multiple : false,
        beforeUpload: beforeUpload,
        headers: { token },
        fileList: value?.fileList ? value?.fileList : value ?? [],
        onChange(info) {
            let {
                file: { name, status, response },
                fileList,
            } = info;
            onChange(fileList)
        },
        onPreview(file) {
            if (file.response) {
                setcururl(file.response.data.dataList[0].url)
            } else if (file.url) {
                setcururl(file.url)
            } else {
                setcururl(file.thumbUrl)
            }
            setVisible(true);
        }
    };

    const uploadBtn =
        item.listType == 'img' ? (
            <div>
                <PlusOutlined />
                <div style={{ marginTop: 8 }}>上传</div>
            </div>
        ) : (
            <Button icon={<UploadOutlined />}>上传</Button>
        ),
        limit = item.limit ? item.limit : 1000;


    let croprops = useMemo(() => {
        let aspect = 3;
        if (item.cropwidth && item.cropheight) {
            aspect = item.cropwidth / item.cropheight
        }
        return {
            width: item.cropwidth ? item.cropwidth : 1200,  //裁剪宽度
            height: item.cropheight ? item.cropheight : 400, //裁剪高度
            resize: true, //裁剪是否可以调整大小
            resizeAndDrag: true, //裁剪是否可以调整大小、可拖动
            rotate: true,
            modalTitle: "裁切您的图片", //弹窗标题
            modalWidth: 1000, //弹窗宽度
            aspect: aspect
        }
    }, [item])




    return (
        <div style={{ marginBottom: 12 }}>
            {
                item.crop ?
                    <ImgCrop {...croprops}>
                        <Upload {...uploadprops} style={{ width: '100%' }}>
                            {(value && value?.fileList?.length > limit - 1 || value && value?.length > limit - 1)
                                ? null
                                : uploadBtn}
                        </Upload>
                    </ImgCrop> :
                    <Upload {...uploadprops} style={{ width: '100%' }}>
                        {(value && value?.fileList?.length > limit - 1 || value && value?.length > limit - 1)
                            ? null
                            : uploadBtn}
                    </Upload>
            }
        </div>
    )


}